<template>
  <layout-slot :reArticle="reArticle">
    <article class="main-content page-page">
      <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
          {{ pageInfo.title }} </h1>
        <div class="post-data">
          <time datetime="2020-04-27T23:04:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                 aria-hidden="true"> </i> {{ pageInfo.date |  dateFormat('{y}-{m}-{d}') }}
          </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ comments }} 评论</a>&nbsp;&nbsp;
          <i class="fa fa-eye" aria-hidden="true"></i> {{ pageInfo.view }} 浏览
        </div>
      </div>
      <div>
        <p><strong>网抑云歌单</strong></p>
        <aplayer style="margin-left: 0"  :audio="audio" :lrcType="3" loop="all" :autopaly="false"/>
      </div>
      <div id="post-content" class="post-content" v-html="pageInfo.intro"></div>
    </article>
    <Twikoo/>
  </layout-slot>
</template>

<script>

  import { getMoviesDetail, getReArticle, recordCount } from '~/api'

  export default {
    name: 'music',
    data(){
      return{
        pageInfo:{},
        audio: {
          name: 'masayume-chasing',
          artist: 'BoA',
          url: 'https://cdn.zipblog.top/music/masayume-chasing.mp3',
          cover: 'https://p2.music.126.net/zZtUDuWk6qIe3ezMt4UMjg==/109951165796417308.jpg?param=128x128',
          lrc: 'https://cdn.zipblog.top/lrc/Masayume.lrc',
        },
        reArticle:[]
      }
    },
    computed: {
      comments () {
        return this.$store.state.comments
      }
    },
    async asyncData({app}){
      let pageInfo = {}
      await getMoviesDetail(app.$axios,{path: "/music"}).then(({data}) => {
        pageInfo ={
          intro:data.data.articleContent,
          date:data.data.articleUpdated,
          view:data.data.articleViewCount,
          comments:data.data.articleCommentCount,
          title:data.data.articleTitle
        }
        // 记录浏览量
        recordCount(app.$axios,{id: data.data.oId}).then((res) => {
        })
      })
      let reArticle = await getReArticle(app)
      return {
        pageInfo,
        reArticle
      }
    }
  }
</script>

<style scoped>

</style>
